<template>
  <div id="container8" />
</template>
<script>
import { Bar } from '@antv/g2plot'
export default {
  mounted() {
    this.getchart7()
  },
  methods: {
    getchart7() {
      const data = [
        {
          year: '1991',
          value: 3,
          type: '差评'
        },
        {
          year: '1992',
          value: 4,
          type: '差评'
        },
        {
          year: '1993',
          value: 3.5,
          type: '差评'
        },
        {
          year: '1994',
          value: 5,
          type: '差评'
        },
        {
          year: '1995',
          value: 4.9,
          type: '差评'
        },
        {
          year: '1996',
          value: 6,
          type: '差评'
        },
        {
          year: '1997',
          value: 7,
          type: '差评'
        },
        {
          year: '1998',
          value: 9,
          type: '差评'
        },
        {
          year: '1999',
          value: 10,
          type: '差评'
        },
        {
          year: '1991',
          value: 3,
          type: '好评'
        },
        {
          year: '1992',
          value: 4,
          type: '好评'
        },
        {
          year: '1993',
          value: 3.5,
          type: '好评'
        },
        {
          year: '1994',
          value: 5,
          type: '好评'
        },
        {
          year: '1995',
          value: 4.9,
          type: '好评'
        },
        {
          year: '1996',
          value: 6,
          type: '好评'
        },
        {
          year: '1997',
          value: 7,
          type: '好评'
        },
        {
          year: '1998',
          value: 9,
          type: '好评'
        },
        {
          year: '1999',
          value: 13,
          type: '好评'
        }
      ]

      const stackedBarPlot = new Bar('container8', {
        data: data.reverse(),
        isStack: true,
        xField: 'value',
        yField: 'year',
        seriesField: 'type',
        height: 300,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'left', 'middle', 'right'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' }
          ]
        }
      })

      stackedBarPlot.render()
    }
  }
}
</script>
